<template>
  <div class="ctn" v-loading="loding">
    <div class="filter-container" style="margin: 10px 0">
      <el-input
        @keyup.enter.native="query()"
        v-model="search"
        style="width: 50%"
        class="input-with-select"
      >
      </el-input>
      <el-button
          slot="append"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="query()"
        >
          搜索
        </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-s-promotion"
        @click="add"
      >
        申请
      </el-button>
    </div>

    <el-table
      :data="listinfo" 
      style="width: 99%" 
      border="true"
      stripe="true" 
      :header-cell-style="{background:'#eef1f6',color:'#606266'}" 
      max-height="800px"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="机构简介">
              <span>{{ props.row.intro }}</span>
            </el-form-item>
            <el-form-item label="机构地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item
              v-if="props.row.img != domain"
              label="封面图片"
            >
              <span>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="props.row.logo"
                  fit="cover"
                />
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column
        label="机构ID"
        align="center"
        width="120"
        prop="o_id"
        sortable
      />

      <el-table-column label="机构名称" align="center" prop="name" sortable />

      <el-table-column label="预留号码" align="center" width="120" prop="tel" />

      <el-table-column width="120" label="分成比例" align="center">
        <template slot-scope="x">
          <span> {{ x.row.o_rate }}% </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="yue"
        label="机构收益"
        align="center"
        width="120"
      />

      <el-table-column  label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="open(scope.$index, scope.row)" icon="el-icon-edit" size="small"
            >编辑</el-button
          >
          <el-button type="danger" @click="cencel(scope.$index, scope.row)" icon="el-icon-delete" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="sousuo == false" class="pagectn">
      <el-pagination
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="pages"
        @current-change="pagechange"
      />
    </div>
    <serviceadd @then="requestservice(thispage)" ref="add"></serviceadd>
  </div>
</template>

<script>
import serviceadd from "@/components/service/add";
import { getogz,ogznum } from "@/api/user/organization.js";
import axios from "axios";
export default {
  components: {
    serviceadd
  },
  data() {
    var $domain = process.env.VUE_APP_BASE_API;
    return {
      domain: $domain,
      listinfo: [],
      pages: 0,
      type: [],
      thispage: 0,
      search: "",
      sousuo: false,
      loding: false,
    };
  },
  async created() {
    this.loding = true;
    this.requestogz(1)
  },
  methods: {
    pagechange(page) {
      this.thispage = page;
      this.requestogz(page);
    },
    getpages() {
      var that = this;
      var data = {
        field: "o_id",
        op: ">",
        value: "0",
      };
      ogznum(data).then((res) => {
        console.log("总条数", res);
        that.pages = parseInt(res);
      });
    },
    cencel(index, row) {
      this.$confirm("此操作将拒绝该服务的发布, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.change(row.s_id,2)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    open(index, row) {
       this.$router.push({
         path:"reg",
         query:{id:row.o_id}
       })
    },
    add() {
      this.$refs.add.add();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    query() {
      this.loding = true;
      this.sousuo = true;
      // var that = this;
      // var data = {
      //   field: "check_status",
      //   op: "<>",
      //   value: 1,
      //   name: that.search,
      // };
      // getogz(data).then((res) => {
      //   console.log(res);
      //   that.listinfo = res;
      //   that.listinfo.forEach((val) => {
      //      that.$set(val, "typename", that.gettypename(val.sc_id));
      //      that.$set(val, "doctortype", that.getdoctortype(val.type))
      //   });
      //   that.loding = false;
      // });
    },
    requestogz(page) {
      this.loding = true;
      var that = this;
      var data = {
        field: "o_id",
        op: ">",
        value: "0",
        address: "",
        page:page
      };
      console.log("class请求", data);
      getogz(data).then((res) => {
        that.getpages();
        console.log(res);
        that.listinfo = res;
        that.loding = false;
      });
    }
  },
};
</script>

<style>
.ctn {
  display: flex;
  flex-flow: column;
  padding-bottom: 50px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-bottom: 0;
  width: 100%;
  white-space: pre-line;
}
.el-form--inline .el-form-item__content {
  display: block;
}
.el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.close {
  opacity: 0;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload--picture-card:hover .close {
  opacity: 1;
}
.close > i {
  margin: auto;
}
::-webkit-scrollbar {
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
}
.pagectn {
  width: 100%;
  background-color: #fff;
  padding: 5px;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
